<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />


    <title>Document</title>

    <style>
        * {
            list-style: none;
        }
        
        body .mod-home-logo {
            min-height: .15rem;
        }
        
        div {
            display: block;
        }
        
        .mod-home-mid-touchHeader .hm-touchheader__line {
            display: flex;
            flex-direction: row;
        }
        
        .mod-home-mid-touchHeader .hm-touchheader__link {
            width: 20%;
            text-align: center;
            margin: .07rem 0 .07rem;
            text-decoration: none;
        }
        
        a,
        ins,
        s,
        u,
        del {
            text-decoration: none;
        }
        
        input,
        textarea,
        button,
        select,
        a {
            outline: 0 none;
        }
        
        body {
            border-top: 0 !important;
            font-size: .12rem;
            font-family: "PingFangSC-Regular";
            min-width: 320px !important;
        }
        
        .mod-home-mid-touchHeader .hm-touchheader__img img {
            width: 100%;
        }
        
        img,
        object,
        input,
        textarea,
        button,
        select {
            vertical-align: middle;
        }
        
        fieldset,
        img {
            border: 0;
        }
        
        .mod-home-mid-touchHeader .hm-touchheader__link {
            width: 20%;
            text-align: center;
            margin: .07rem 0 .07rem;
            text-decoration: none;
        }
        
        .hm-touchheader__line {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        body,
        input,
        textarea,
        button,
        select,
        pre,
        xmp,
        tt,
        code,
        kbd,
        samp {
            line-height: 1.5;
            font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif;
        }
        
        .hm-touchheader__line img {
            width: 50px;
            height: 55px;
        }
        
        .hm-touchheader__link {
            float: left;
            text-align: center;
            margin: 0 13px;
        }
        /* .hm-touchheader__line {} */
        
        .hm-touchheader__line {
            width: 100%;
            height: 83px;
            /* background-color: red; */
        }
        
        .mod-home-mid-touchHeader .hm-touchheader__link {
            width: 20%;
            text-align: center;
            margin: .07rem 0 .07rem;
            text-decoration: none;
        }
        
        a,
        ins,
        s,
        u,
        del {
            text-decoration: none;
        }
        
        input,
        textarea,
        button,
        select,
        a {
            outline: 0 none;
        }
        
        user agent stylesheet a:-webkit-any-link {
            color: -webkit-link;
            cursor: pointer;
            text-decoration: underline;
        }
        
        .hm-touchheader__line img {
            float: left;
        }
        
        .hm-touchheader__line {
            display: flex;
            text-align: center;
        }
        /* 
        
        今日
        
        */
        
        .home-title {
            border-bottom: 2px solid #eceef3;
            *zoom: 1;
            max-width: 100%;
        }
        
        .home-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        
        .home-title li {
            text-align: center;
            justify-content: space-between;
            align-items: center;
        }
        
        .home-title-nav1 {
            margin: 18px 15px;
        }
        /* 
        优惠旅游

        


        */
        
        .youhui {
            display: flex;
            justify-content: space-between;
        }
        
        .once-body img {
            display: block;
            max-width: 100%;
            height: auto;
            flex-grow: 1;
        }
        
        .fox {
            background-color: red;
            height: 100%;
        }
        /* 
        
        
         */
        
        .home-title .icon-hot-dujia {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            font-family: homenode !important;
            background: linear-gradient(-135deg, #00bcd4 0, #10e9ac 100%);
            margin-right: 8px;
            -webkit-text-fill-color: transparent;
        }
        
        .l_lside .mod-home-dujia .mod-home-dujia-head .home-title h3 {
            color: #15161a;
            font-size: .18rem;
            font-weight: 550;
        }
        
        .private {
            display: flex;
        }
        
        .private h3 {
            color: #15161a;
            font-size: 15px;
            font-weight: 550;
            margin-left: 10px;
        }
        /* 
        
        热门度假
        
         */
        
        .one {
            /* background-color: red; */
            display: block;
            flex-direction: column-reverse;
            margin-right: 5px;
            overflow: hidden;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 200px;
        }
        
        .boxone img {
            display: flex;
            /* width: 400px; */
            max-width: 100%;
        }
        
        .boxone {
            display: flex;
            flex: 1;
            overflow: hidden;
            flex-direction: column;
            margin-left: 10px;
        }
        
        .box {
            display: flex;
            /* justify-content: space-between; */
        }
        /* 
        轮播图
         */
        
        .wrap {
            max-width: 100%;
            background-color: red;
        }
        
        .list {
            width: 800px;
            height: 400px;
            position: relative;
            padding-left: 0%;
        }
        
        .item {
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            position: absolute;
            opacity: 0;
            transition: all .5s;
        }
        
        .btn {
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }
        
        #goNext {
            right: 0;
        }
        
        #goPre {
            left: 0;
        }
        
        .item.active {
            opacity: 1;
            z-index: 10;
        }
        
        .pointList {
            padding-left: 0px;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 10px;
            z-index: 1000;
        }
        
        .point {
            width: 10px;
            height: 10px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
            float: left;
            margin-right: 14px;
            border-style: solid;
            border-width: 2px;
            background-color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
        }
        
        .point.active {
            background-color: rgba(255, 255, 255, 1);
        }
        /* 
        
        轮播图
         */
        
        .container {
            max-width: 100%;
            /* background: red; */
            margin: 100px auto;
            position: relative;
            display: flex;
            justify-content: center;
        }
        
        .container img {
            max-width: 100%;
        }
        
        .indexes {
            display: flex;
            position: absolute;
            bottom: -5px;
            /* background: red; */
        }
        
        .indexes li {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            margin: 0 5px;
        }
    </style>


</head>

<body>
    <script src="../public/javascripts/jquery-1.7.2.js"></script>
    <div class="mod-home-logo" id="mod-home-logo">

    </div>
    <!-- 模块1 -->

    <div class="header">


        <div class="hm-touchheader__line hm-touchheader__iconsma ">
            <a href="//touch.qunar.com/hotelindex?bd_source=&amp;border=oversea" class="hm-touchheader__link" id="international" index="6" etid="mo_outhotel" chnname="海外酒店" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/hotel.png"></div>
                <span class="hm-touchheader__title">酒店</span>
            </a>
            <a href="//touch.qunar.com/lowFlight/index?cat=touchhome&amp;from=touchhome" class="hm-touchheader__link" id="bargainflight" index="7" etid="mo_lowflight" chnname="低价机票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/flight.png"></div>
                <span class="hm-touchheader__title">机票</span>
            </a>
            <a href="//touch.qunar.com/h5/bus?bd_source=" class="hm-touchheader__link" id="bus" index="8" etid="mo_traffic" chnname="汽车票船票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/train.png"></div>
                <span class="hm-touchheader__title">火车票</span>
            </a>
            <a href="//touch.dujia.qunar.com/freetrip/index.qunar?dep=&amp;et=home_free_t&amp;it=FreetripTouchin" class="hm-" id="freetravel" index="9" etid="mo_free" chnname="自由行" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/package.png"></div>
                <span class="hm-touchheader__title">度假</span>
            </a>
            <a href="//touch.go.qunar.com/index.htm?from=mobile" class="hm-touchheader__link" id="__link_travel__" index="10" etid="mo_strategy" chnname="攻略" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/piao.png"></div>
                <span class="hm-touchheader__title">景点门票</span>
            </a>
        </div>

        <!-- 模块2 -->


        <div class="hm-touchheader__line hm-touchheader__iconsma ">
            <a href="//touch.qunar.com/hotelindex?bd_source=&amp;border=oversea" class="hm-touchheader__link" id="international" index="6" etid="mo_outhotel" chnname="海外酒店" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/f5e5770393d759578962e53ee67798c8.png"></div>
                <span class="hm-touchheader__title">海外酒店</span>
            </a>
            <a href="//touch.qunar.com/lowFlight/index?cat=touchhome&amp;from=touchhome" class="hm-touchheader__link" id="bargainflight" index="7" etid="mo_lowflight" chnname="低价机票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/a36d2288f19e54562338f4d8ef986288.png"></div>
                <span class="hm-touchheader__title">低价机票</span>
            </a>
            <a href="//touch.qunar.com/h5/bus?bd_source=" class="hm-touchheader__link" id="bus" index="8" etid="mo_traffic" chnname="汽车票船票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/377db8cb2143aebf01869c9baad3d325.png"></div>
                <span class="hm-touchheader__title">汽车票船票</span>
            </a>
            <a href="//touch.dujia.qunar.com/freetrip/index.qunar?dep=&amp;et=home_free_t&amp;it=FreetripTouchin" class="hm-" id="freetravel" index="9" etid="mo_free" chnname="自由行" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/ae617a31e0bd5803d76918b817f6d942.png"></div>
                <span class="hm-touchheader__title">自由行旅游</span>
            </a>
            <a href="//touch.go.qunar.com/index.htm?from=mobile" class="hm-touchheader__link" id="__link_travel__" index="10" etid="mo_strategy" chnname="攻略" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/1316dc82d1ce6259686d5a68880e5a9d.png"></div>
                <span class="hm-touchheader__title">攻略</span>
            </a>
        </div>


        <!-- 模块3 -->


        <div class="hm-touchheader__line hm-touchheader__iconsma ">
            <a href="//touch.qunar.com/hotelindex?bd_source=&amp;border=oversea" class="hm-touchheader__link" id="international" index="6" etid="mo_outhotel" chnname="海外酒店" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/01d2f57f920666364197a850dab859a8.png"></div>
                <span class="hm-touchheader__title">海外酒店</span>
            </a>
            <a href="//touch.qunar.com/lowFlight/index?cat=touchhome&amp;from=touchhome" class="hm-touchheader__link" id="bargainflight" index="7" etid="mo_lowflight" chnname="低价机票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/83af731055e121a3251690b225327b56.png"></div>
                <span class="hm-touchheader__title">低价机票</span>
            </a>
            <a href="//touch.qunar.com/h5/bus?bd_source=" class="hm-touchheader__link" id="bus" index="8" etid="mo_traffic" chnname="汽车票船票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/5b6737be49ca243072ca614f07803b83.png"></div>
                <span class="hm-touchheader__title">汽车票船票</span>
            </a>
            <a href="//touch.dujia.qunar.com/freetrip/index.qunar?dep=&amp;et=home_free_t&amp;it=FreetripTouchin" class="hm-" id="freetravel" index="9" etid="mo_free" chnname="自由行" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/1e107321f5396ea4994cd832232ecf8a.png"></div>
                <span class="hm-touchheader__title">自由行旅游</span>
            </a>
            <a href="//touch.go.qunar.com/index.htm?from=mobile" class="hm-touchheader__link" id="__link_travel__" index="10" etid="mo_strategy" chnname="攻略" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/c65b3bb7571a6bd62df669213e44b84d.png"></div>
                <span class="hm-touchheader__title">攻略</span>
            </a>
        </div>


        <!-- 模块4 -->



        <div class="hm-touchheader__line hm-touchheader__iconsma ">
            <a href="//touch.qunar.com/hotelindex?bd_source=&amp;border=oversea" class="hm-touchheader__link" id="international" index="6" etid="mo_outhotel" chnname="海外酒店" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/f6bb08a239ce1b038204120a8d1e4669.png"></div>
                <span class="hm-touchheader__title">海外酒店</span>
            </a>
            <a href="//touch.qunar.com/lowFlight/index?cat=touchhome&amp;from=touchhome" class="hm-touchheader__link" id="bargainflight" index="7" etid="mo_lowflight" chnname="低价机票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/3a08f360e958ccb2b947049387873ace.png"></div>
                <span class="hm-touchheader__title">低价机票</span>
            </a>
            <a href="//touch.qunar.com/h5/bus?bd_source=" class="hm-touchheader__link" id="bus" index="8" etid="mo_traffic" chnname="汽车票船票" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/19b4f6d2fabd617789fa5aad65b249da.png"></div>
                <span class="hm-touchheader__title">汽车票船票</span>
            </a>
            <a href="//touch.dujia.qunar.com/freetrip/index.qunar?dep=&amp;et=home_free_t&amp;it=FreetripTouchin" class="hm-" id="freetravel" index="9" etid="mo_free" chnname="自由行" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/799d9d090d1625a854194460c8849fee.png"></div>
                <span class="hm-touchheader__title">自由行旅游</span>
            </a>
            <a href="//touch.go.qunar.com/index.htm?from=mobile" class="hm-touchheader__link" id="__link_travel__" index="10" etid="mo_strategy" chnname="攻略" rel="nofollow">
                <div class="hm-touchheader__img"><img src="../public/images/25e3b9f17a21a6e0113c57a23ffccde4.png"></div>
                <span class="hm-touchheader__title">攻略</span>
            </a>
        </div>



    </div>




    <!--优惠-->
    <div class="home-title">
        <ul class="home-title-nav" beacon-first="true">
            <li style="border-radius: 3px;width: 80px; height:30px;background-color: red;float: left;line-height: 30px;"><a href="" rel="nofollow" data-type="today" class="active">今日特惠</a></li>
        </ul>
        <ul class="home-title-nav1" beacon-first="true">
            <li><a href="" rel="nofollow" data-type="today" class="active">更多特惠></a></li>
        </ul>
        </span>
    </div>


    <!--
     优惠旅游地点
 -->

    <div class="fox">
        <div class="youhui">

            <div class="once1" style="padding: 10px 20px;">
                <div class="once-body">
                    <img alt="" src="../public/images/6659ef3a-176d-4508-a617-de9667a722b6.jpg_r_480x320x95_4923dad4.jpg">
                    <div class="once1-son">
                        <p style=" font-size: .14rem;
                font-weight: 450;
                letter-spacing: 0;
                color: #000;
                margin-bottom: 0 !important;
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;">厦门-三明 3天跟团游</p>
                        <p class="" style="    height: auto !important;
                font-size: .13rem;
                font-weight: 100;
                color: #555;" title="厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游">厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游</p>
                        <div class="">
                            <div class="">
                                <span><em style="color: #ff7400;">¥</em></span><span><em style="color: #ff7400;font-size: 18px;">1066</em><span class="unit" style="font-size: 15px;color: #ff7400;"> 起</span></span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>



            <div class="once1">
                <div class="once-body " style="padding: 10px 0;">
                    <img alt="" src="../public/images/6659ef3a-176d-4508-a617-de9667a722b6.jpg_r_480x320x95_4923dad4.jpg">
                    <div class="once1-son">
                        <p style=" font-size: .14rem;
                font-weight: 450;
                letter-spacing: 0;
                color: #000;
                margin-bottom: 0 !important;
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;">厦门-三明 3天跟团游</p>
                        <p class="" style="    height: auto !important;
                font-size: .13rem;
                font-weight: 100;
                color: #555;" title="厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游">厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游</p>
                        <div class="">
                            <div class="">
                                <span><em style="color: #ff7400;">¥</em></span><span><em style="color: #ff7400;font-size: 18px;">1309</em><span class="unit" style="font-size: 15px;color: #ff7400;"> 起</span></span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>






        </div>


        <div class="youhui">


            <div class="once1" style="padding: 10px 20px;">
                <div class="once-body">
                    <img alt="" src="../public/images/6659ef3a-176d-4508-a617-de9667a722b6.jpg_r_480x320x95_4923dad4.jpg">
                    <div class="once1-son">
                        <p style=" font-size: .14rem;
                font-weight: 450;
                letter-spacing: 0;
                color: #000;
                margin-bottom: 0 !important;
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;">厦门-三明 3天跟团游</p>
                        <p class="" style="    height: auto !important;
                font-size: .13rem;
                font-weight: 100;
                color: #555;" title="厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游">厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游</p>
                        <div class="">
                            <div class="">
                                <span><em style="color: #ff7400;">¥</em></span><span><em style="color: #ff7400;font-size: 18px;">480</em><span class="unit" style="font-size: 15px;color: #ff7400;"> 起</span></span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>




            <div class="once1" style="padding: 10px 0px;">
                <div class="once-body">
                    <img alt="" src="../public/images/6659ef3a-176d-4508-a617-de9667a722b6.jpg_r_480x320x95_4923dad4.jpg">
                    <div class="once1-son">
                        <p style=" font-size: .14rem;
                 font-weight: 450;
                 letter-spacing: 0;
                 color: #000;
                 margin-bottom: 0 !important;
                 line-height: 1.5;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;">厦门-三明 3天跟团游</p>
                        <p class="" style="    height: auto !important;
                 font-size: .13rem;
                 font-weight: 100;
                 color: #555;" title="厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游">厦门-泰宁大金湖+上清溪九龙潭+寨下大侠谷+尚书第三日游</p>
                        <div class="">
                            <div class="">
                                <span><em style="color: #ff7400;">¥</em></span><span><em style="color: #ff7400;font-size: 18px;">980</em><span class="unit" style="font-size: 15px;color: #ff7400;"> 起</span></span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>




    <!--

        当季
    -->

    <div class="private">
        <img src="../public/images/椰子树2.png" alt="">
        <h3>当季热门度假</h3>
    </div>




    <div class="box">
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+6晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+4晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>

    </div>


    <div class="box">
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+5晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+5晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>

    </div>



    <div class="box">
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+3晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+6晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>

    </div>

    <div class="box">
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+6晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>
        <div class="boxone">
            <img src="../public/images/d815539e74dc4a02.jpg_256x160_00a6f984.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                <span style="font-size: 16px;color: #000;">含往返飞机票(含税)+6晚住宿</span>
                <div class="">
                    <span style="font-size: 18px;font-weight: 500;color: #ff7400;">  <em>¥</em>&nbsp;<em>3540</em></span>
                </div>


            </p>
        </div>

    </div>


    <div id="app">
        <div class="container">
            <a v-show="i===index" v-for="(item,i) in arr" :key="item.id" :href="item.url">

                <img :src="item.img" alt="">

            </a>
            <!-- <img src="http://p1.music.126.net/dRp5uzj1gWZboJFCEj1tOw==/109951164881544515.jpg?imageView&quality=89" alt=""> -->

            <ul class="indexes">
                <li v-for="(item,i) in arr" :class="{active:i===index}"></li>

            </ul>
        </div>
    </div>
    <script src="../public/javascripts/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            mounted() {
                setInterval(() => {
                    ++this.index
                    if (this.index > this.arr.length - 1) this.index = 0
                }, 1000)
            },
            data() {
                return {
                    index: 0,
                    arr: [{
                        url: "http://zt.dujia.qunar.com/zts/2019_viking/pc.php",
                        img: "https://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg"
                    }, {
                        url: "https://zt.dujia.qunar.com/bp/zt.php?id=4601&in_track=pc_vacation_banner04&tf=pc_vacation_banner04",
                        img: "https://imgs.qunarzz.com/vc/6d/9f/35/b8ad5468f73fd60ec0ced086f6.jpg_92.jpg"
                    }, {
                        url: "https://zt.dujia.qunar.com/bp/zt.php?id=579",
                        img: "https://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg"
                    }, ]
                }
            },


        })
    </script>





    <!-- 

旅行攻略

 -->

    <div class="home-title">

        <h3>
            旅行攻略
        </h3>

        <span class="more" style="line-height: 40px;">
            <a data-beacon="旅游攻略-更多" target="_blank" href="//travel.qunar.com/?from=qunarindexTr100" rel="nofollow">
                <span>更多精彩攻略</span>
        <i class="icon-more"></i>
        </a>
        </span>

    </div>




    <!-- 
 旅行记录下


    
 -->

    <div class="box" style="padding: 10px 0;">
        <div class="boxone">
            <img src="../public/images/7d9b233c71cad13ded0013f9c9cec635.jpg" alt="" style="border-radius: 9px;">
            <p class="one">

                驾一叶扁舟，寻瓯江往事


            </p>
        </div>
        <div class="boxone">
            <img src="../public/images/fd16ccffb2e2376ff370bda3bebebd71.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                不负嵊夏好时光，泗乎太安逸
            </p>
        </div>
    </div>

    <div class="box">
        <div class="boxone">
            <img src="../public/images/c2ae82fcc9fa11fa253e5919c49bcfbf.jpg" alt="" style="border-radius: 9px;">
            <p class="one">

                探访日本，一部家庭旅行画册


            </p>
        </div>
        <div class="boxone">
            <img src="../public/images/5a11974656794b4715156501be10c1b7.jpg" alt="" style="border-radius: 9px;">
            <p class="one">
                厦门，带娃出行与幸福同行
            </p>
        </div>
    </div>





    <div class="tr" style="height: 60px;display: flex;justify-content: space-around;text-decoration: none;background-color: red;border-top: 1px solid;">
        <div class="top">

            <a href="http://baidu.com" style="display: flex;flex-direction: column;"> <img src="../public/images/火箭.png" alt="">回顶部</a>
        </div>
        <div class="top">

            <a href="" style="display: flex;flex-direction: column;"> <img src="../public/images/公文包.png" alt="">&nbsp;订单</a>
        </div>
        <div class="top">

            <a href="" style="display: flex;flex-direction: column;"> <img src="../public/images/火箭.png" alt="">&nbsp;我的</a>
        </div>
        <div class="top">

            <a href="" style="display: flex;flex-direction: column;"> <img src="../public/images/去哪儿.png" alt="">回顶部</a>
        </div>
    </div>




</body>


</html>